<template>
  <div class="container">
    <nav-bar title="养老补贴区域分布情况"></nav-bar>
    <div class="chart-box chart1">
      <div class="chart-box-header">
        <div class="search">
          <pub-area
            :maxSelectLevel="4"
            @change="changeArea"
            customRightIcon
            label=""
            :isLink="false"
            valueIsLast
            ></pub-area>
          <pub-date @sureDate="sureDate"></pub-date>
        </div>
        <div class="area-detail" @click="goDetailArea">
          区域分布情况
        </div>
      </div>
      <div class="chart-box-content">
        <div class="title">养老补贴金额统计</div>
        <div class="bottom-box">
          <div class="left-box">
            <img src="./img/btzje.png" alt="">
            <div class="text">
              <div class="label">养老补贴总金额（万元）</div>
              <div class="value">
                <count-to
                :startVal="0"
                :endVal="Number(state.detail.total)"
                :decimals="2"
                :duration="2000"
              ></count-to>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="nan">
              <div class="box-rate">
                <div class="box-bgc" :style="{height: state.detail.elderTotalRate}">
                  <div class="rate">
                    <count-to
                      :startVal="0"
                      :endVal="Number(state.detail.elderTotal)"
                      :decimals="2"
                      :duration="2000"
                    ></count-to>
                  </div>
                </div>
                <div class="box-bottom"></div>
              </div>
              <div class="sex">老人补贴</div>
            </div>
            <div class="nv">
              <div class="box-rate">
                <div class="box-bgc" :style="{height: state.detail.orgTotalRate}">
                  <div class="rate">
                    <count-to
                      :startVal="0"
                      :endVal="Number(state.detail.orgTotal)"
                      :decimals="2"
                      :duration="2000"
                    ></count-to>
                  </div>
                </div>
                <div class="box-bottom"></div>
              </div>
              <div class="sex">机构补贴</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="chart-box chart2">
      <div class="chart-box-header">
        老年人补贴统计
      </div>
      <div class="chart-box-content">
        <div class="title">
          <div class="left">老年人补贴金额（万元）</div>
          <div class="right">
            <count-to
              :startVal="0"
              :endVal="Number(state.detail.allowance.total) + Number(state.detail.disable.total)"
              :decimals="2"
              :duration="2000"
            ></count-to>
          </div>
        </div>
        <div class="bottom-box">
          <van-tabs v-model:active="active" type="card" @change="changeTab">
            <van-tab title="高龄津贴">
              <div class="health">
                <div class="left">
                  <div class="health-item">
                    <img src="./img/gljt.png" alt="">
                    <div class="text">
                      <div class="label">高龄津贴金额（万元）</div>
                      <div class="value">
                        <count-to
                          :startVal="0"
                          :endVal="Number(state.detail.allowance.total)"
                          :decimals="2"
                          :duration="2000"
                        ></count-to>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="item">
                    <div class="label">80-89岁</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.allowance.num1)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">90-99岁</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.allowance.num2)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">100岁以上</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.allowance.num3)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="失能津贴">
              <div class="health">
                <div class="left left2">
                  <div class="health-item">
                    <img src="./img/snjt.png" alt="">
                    <div class="text">
                      <div class="label">失能津贴（万元）</div>
                      <div class="value">
                        <count-to
                          :startVal="0"
                          :endVal="Number(state.detail.disable.total)"
                          :decimals="2"
                          :duration="2000"
                        ></count-to>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="item">
                    <div class="label">能力完好津贴（万元）</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.disable.num0)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">轻度失能津贴（万元）</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.disable.num1)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">中度失能津贴（万元）</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.disable.num2)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">中重度失能津贴（万元）</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.disable.num3)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">重度失能津贴（万元）</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.disable.num4)"
                        :decimals="2"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <div class="chart-box chart3">
      <div class="chart-box-header">
        养老机构补贴金额统计
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="left-box">
            <img src="./img/jgbtje.png" alt="">
            <div class="text">
              <div class="label">
                养老机构补贴金额（万元）
              </div>
              <div class="value">
                <count-to
                  :startVal="0"
                  :endVal="Number(state.detail.org.total)"
                  :decimals="2"
                  :duration="2000"
                ></count-to>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="orgType1" id="orgType1"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import dayjs from "dayjs"
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { ref, reactive, onBeforeMount,onMounted,nextTick,onBeforeUnmount } from 'vue'
import { get_subsidy_analysis } from '@/api/elderDistribution'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'
import { useRouter } from 'vue-router'
const active = ref(0);
const showPicker = ref(true);
const router = useRouter()
const state = reactive({
  searchParams: {
    areaCode: useUserStore().userLastArea,
    year:dayjs().format('YYYY')
  },
  detail: {
    allowance:{},
    disable:{},
    org:{},
  },
  myChart:null
})

const getElderDetail = async () => {
  let res = await get_subsidy_analysis(state.searchParams)
  if (res.succeed) {
    res.data.elderTotal = Number(res.data?.elderTotal)
    res.data.orgTotal = Number(res.data?.orgTotal)
    const total = res.data?.elderTotal + res.data?.orgTotal
    res.data.elderTotalRate = res.data?.elderTotal > 0 && total > 0 ? (res.data?.elderTotal / total * 100).toFixed(2) + '%' : '0%'
    res.data.orgTotalRate = res.data?.orgTotal > 0 && total > 0 ? (res.data?.orgTotal / total * 100).toFixed(2) + '%' : '0%'
    state.detail = res.data
    nextTick(() => {
      initChartOrgType()
    })
  }
}

const changeArea = val => {
  state.searchParams.areaCode = val
  getElderDetail()
}

const sureDate = val => {
  state.searchParams.year = val[0]
  getElderDetail()
}

// 年龄分析
const  initChartOrgType = async () => {
  state.myChart = echarts.init(document.getElementById('orgType1'))
  const data = [
          { value: state.detail.org.build, name: '建设补贴' },
          { value: state.detail.org.operate, name: '运营补贴' },
          { value: state.detail.org.bed, name: '床位补贴' },
          { value: state.detail.org.pensonnel, name: '从业人员补贴' }

        ]
  const option = {
    legend: {
      bottom: '2%',
      left: 'center',
      orient: 'horizontal',
      icon: 'rect'
    },
    toolbox: {
      show: false,
    },

      tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}万元',
      backgroundColor: 'rgba(47,37,198,0.75)',
      borderColor :'#2880FF',
        borderWidth: 1,
        textStyle:{
          color  :'#fff'
        }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['30%','50%'],
        center: ['50%', '30%'],
        // roseType: 'area',
        label: {
          show: false,
          formatter: '{c}万元',
        },
        labelLine: {
            normal: {
                length: 10, //第一条线
                length: 5, //第二条线
                lineStyle: {
                    width: 1, // 线条的宽度
                }
            }
        },
        selectedOffset :30,
        selectedMode: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        data: data
      }
    ]
  };

  state.myChart.setOption(option)
}

const goDetailArea = () => {
  router.push('/subsidyArea')
}

const changeTab = val => {
  console.log('val', val);
}

onBeforeUnmount(() => {
  state.myChart && state.myChart.dispose()
})

onMounted(() => {
  getElderDetail()
})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;

  .chart-box {
    // width: calc(100% - 80px);
    width: 100%;
    font-size: 30px;
    font-family: Microsoft YaHei;
    color: #000000;
    margin-top: 20px;
    background-color: #fff;

    .chart-box-header {
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #E6E6E6;
    }
  }

  .chart1 {
    height: 440px;
    .chart-box-header {
      justify-content: space-between;

      .search {
        display: flex;
        align-items: center;
      }
      :deep(.van-cell) {
          width: 220px;
          height: 100%;
        }
      .area-detail {
        padding-right: 40px;
        font-weight: 400;
        color: #4375E4;
      }
    }

    .chart-box-content {
      .title {
        font-weight: bold;
        color: #000000;
        margin-top: 30px;
        margin-left: 40px;
        height: 30px;
        line-height: 30px;
      }

      .bottom-box {
        height: 290px;
        width: 100%;
        display: flex;
        padding: 0 40px;

        .left-box {
          display: flex;
          align-items: center;
          img {
            width: 97px;
            height: 97px;
            margin-right: 10px;
          }

          .text {
            font-family: PingFang SC;
            color: #333333;
            .label {
              font-size: 24px;
              margin-bottom: 30px;
            }

            .value {
              font-size: 36px;
            }
          }
        }

        .right-box {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          padding: 20px 0 40px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000033;

          .nan,.nv {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            width: 60px;

            .box-rate {
              height: 178px;
              margin-bottom: 6px;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              .box-bgc {
                width: 100%;
                background-color: #d2e3ff;
                position: relative;

                .rate {
                position: absolute;
                left: 50%;
                top: -34px;
                transform: translateX(-50%);
              }
              }

              .box-bottom {
                width: 100%;
                height: 4px;
                background: #1F71FF;
              }
            }

            .sex {
              line-height: 24px;
              width: 100px;
            }
          }

          .nv {
            .box-rate {
              .box-bgc {
                background-color: #ffebd2;
              }

              .box-bottom {
                background: #FF9A1F;
              }
            }
          }
        }
      }
    }
  }

  .chart2 {
    // height: 580px;
    height: 640px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .title {
        color: #333333;
        margin: 30px 40px 40px;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;

        .left {
          font-size: 24px;
        }
        .right{
          font-size: 36px;
        }
      }

      .bottom-box {
        :deep(.van-tabs) {
          height: 470px;
          padding: 0 40px;
        }

        :deep(.van-tabs__wrap) {
          border-radius: 5px;
          margin: 0 0 40px;
        }
        :deep(.van-tabs__nav--card) {
          width: 506px;
          height: 60px;
          background: #E8F2FE;
          border-radius: 5px;
          margin: 0 auto;
        }

        :deep(.van-tab){
          width: 170px;
          padding: 0;

          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #000000;
          }
        }

        :deep(.van-tab--active){
          background: #4375E4;
          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #FFFFFF;
            font-weight: normal;
          }
        }

        :deep(.van-tabs__content){
          .age {
            width: 100%;
            height: 370px;
          }
        }

        .health {
          // height: 370px;
          height: 320px;
          display: flex;

          .left {
            width: 350px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .health-item {
              width: 100%;
              height: 126px;
              font-size: 24px;
              font-family: PingFang SC;
              color: #333333;
              background-size: 100% 126px;
              background-repeat: no-repeat;
              display: flex;
              // flex-direction: column;
              justify-content: space-evenly;
              // padding-left: 20px;

              img {
                width: 97px;
                height: 97px;
                margin-right: 10px;
              }

              .text {
                .label {
                  margin-bottom: 30px;
                }

                .value {
                  font-size: 36px;
                }
              }

            }
          }

          .left2 {
            width: 300px;
          }

          .right {
            flex: 1;
            // padding:35px 0 35px 30px;
            display: flex;
            flex-direction: column;
            font-size: 24px;

            .item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 100px;
              border-bottom: 1px dashed #959595;
              position: relative;
              text-indent: 1em;
            }

            .item::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 0px;
              transform: translateY(-50%);
              width: 10px;
              height: 10px;
              background: #4375E4;
              border-radius: 50%;
            }

            .item:nth-child(3){
              border-bottom: none;
            }
          }
        }

        .tour-analysis {
          float: right;
          font-size: 24px;
          font-family: PingFang SC;
          color: #333333;
        }

        .tour {
          height: 370px;
          width: 100%;
        }
      }
  }

  .chart3 {
    height: 520px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

    .chart-box-content {
      .title {
        font-weight: bold;
        color: #000000;
        margin-top: 30px;
        margin-left: 40px;
        height: 30px;
        line-height: 30px;
      }

      .bottom-box {
        height: 430px;
        width: 100%;
        display: flex;
        padding: 0 40px;

        .left-box {
          display: flex;
          align-items: center;
          img {
            width: 97px;
            height: 97px;
            margin-right: 15px;
          }

          .text {
            font-family: PingFang SC;
            color: #333333;
            .label {
              font-size: 24px;
              margin-bottom: 30px;
              width: 220px;
            }

            .value {
              font-size: 36px;
            }
          }
        }

        .right-box {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          // padding: 20px 0 40px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000033;

          .orgType1 {
            width: 100%;
            height: 430px;
          }
        }
      }
    }
  }
}
</style>
